<template>
    <div class="viewDetailsItemModal" :data-remark="true"  v-if="isShow" >
        <div class="main" >
            <div class="closeIcon" :data-remark="true" @click="closeModel">
                x
            </div>
            <div class="header" >
                {{detailInfo.DataLabel}}
            </div>
            <div class="content" v-html="detailInfo.DataText"></div>
        </div>
    </div>
</template>

<script>
//右侧页面查看项目详情某一项数据详情
import {toRefs, reactive, nextTick,computed} from 'vue'
export default {
    name: "viewDetailsItemModal",
    setup(props){
     let modalObj  = reactive({
         isShow:false,
         detailInfo:{},
         openModal(itemInfo){
             modalObj.isShow = true
             nextTick(()=>{
                 modalObj.detailInfo = {
                     ...itemInfo,
                     DataText:itemInfo.DataText.replace(/\n/g, '<br>'),
                 }
             })
         },
      closeModel(){
        modalObj.isShow = false
      }
     })
     return {
      ...toRefs(modalObj)
     }
    }

}
</script>

<style scoped lang="less">
::-webkit-scrollbar {
    width: 4px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(64, 124, 214, 1); /* 设置滚动条滑块颜色 */
    border-radius: 4px; /* 设置滚动条滑块圆角 */
}
 .viewDetailsItemModal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    .main{
       width: 1000px;
       height: 700px;
       background: rgba(20, 24, 45, 0.8);
       position: relative;
       z-index: 999;
        display: flex;
        flex-direction: column;
       .closeIcon{
        width: 40px;
        height: 40px;
        position: absolute;
        right: -20px;
        top: -20px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        background: rgba(0, 108, 222, 0.5);
        cursor: pointer;
        color: #fff;
            &:hover{
              background: rgba(255, 0, 0, .5)
            }
        }
        .header{
            font-size: 24px;
            text-align: center;
            line-height: 68px;
            //color:rgba(255,255,255,.8);
            background: rgba(18, 111, 217, 0.3);
            color:rgba(255,255,255,.8);
        }
        .content{
            flex: 1;
            flex-shrink: 0;
            width: 100%;
            overflow-y: auto;
            color:rgba(255,255,255,.8);
            padding: 20px;
        }
    }
 }
</style>